Ext.ns("news");
news.Structure = [{
	text : "Ext.ux.touch.InfiniteCarousel",
	leaf : true,
	card : new Ext.ux.touch.InfiniteCarousel({
		store : Demo.data.InfiniteCarouselStore
	})
},{
	text : "Ext.plugin.touch.form.Speech",
	leaf : true,
	card : new Ext.form.FormPanel({
		items : [
			{ xtype : "textfield", label : "Speech Textfield", plugins : { ptype : "form.speech" } }
		]
	})
},{
	text : "Ext.plugin.touch.CardSwipe",
	leaf : true,
	card : new Ext.Panel({
		layout  : "card",
		cardSwitchAnimation : "slide",
		plugins : [ { ptype : "cardswipe" } ],
		items   : [
			{ html : "Card One"   },
			{ html : "Card Two"   },
			{ html : "Card Three" },
			{ html : "Card Four"  }
		]
	})
},{
	text : "Ext.touch.SegmentedButton",
	leaf : true,
	card : new Ext.Panel({
		html : "Ext.touch.SegmentedButton<br><br>direction: 'vertical' to make a vertical SegmentedButton",
		dockedItems: [
			{
				xtype : "toolbar",
				dock  : "top",
				ui    : "light",
				items : [
					{ xtype : "spacer" },
					{
						xtype : "ext.touch.segmentedbutton",
						items : [
							{ text : "Option 1" },
							{ text : "Option 2", pressed : true },
							{ text : "Option 3" }
						]
					},
					{ xtype : "spacer" }
				]
			},
			{
				xtype : "toolbar",
				dock  : "left",
				ui    : "light",
				items : {
					xtype : "ext.touch.segmentedbutton",
					direction : "vertical",
					items : [
						{ text : "Option 1" },
						{ text : "Option 2" },
						{ text : "Option 3", pressed : true }
					]
				}
			}
		]
	})
},{
	text : "Ext.form.ux.touch.MultiSelect",
	leaf : true,
	card : new Ext.Panel({
		items: [
			{
				xtype        : "multiselectfield",
				label        : "List",
				store        : Demo.data.MultiSelectStore,
				displayField : "text",
				valueField   : "value",
				name         : "multiselect-list",
				itemType     : "list"
			},
			{
				xtype        : "multiselectfield",
				label        : "DataView",
				store        : Demo.data.MultiSelectStore,
				columns      : (Ext.is.Phone) ? 1 : 2,
				itemWidth    : (Ext.is.Phone) ? 200 : 400,
				displayField : "text",
				valueField   : "value",
				name         : "multiselect-dataview",
				itemType     : "dataview"
			},
			{
				xtype        : "multiselectfield",
				label        : "Picker**",
				store        : Demo.data.MultiSelectStore,
				displayField : "text",
				valueField   : "value",
				name         : "multiselect-picker",
				itemType     : "picker"
			},
			{
				xtype: "textareafield",
				disabled: true,
				value: "**Picker version of the Ext.form.ux.touch.MultiSelect component does not support multiselect at this time."
			}
		]
	})
},{
	text : "Ext.form.ux.touch.ColorPickerField",
	leaf : true,
	card : new Ext.Panel({
		items: [
			{
				xtype: "colorpickerfield",
				label: "Color Picker",
				name: "color-picker"
			}
		]
	})
},{
	text : "Ext.ux.touch.GridSummary",
	leaf : true,
	card : new Ext.ux.TouchGridPanel({
		store       : Demo.data.PagingToolbarStore,
		plugins: [new Ext.ux.touch.GridSummary(), new Ext.ux.touch.PagingToolbar()],
		colModel    : [{
			header   : "Company",
			mapping  : "company",
			flex     : 2
		},{
			header   : "Price",
			mapping  : "price",
			style    : "text-align: center;"
		},{
			header   : "Last Updated",
			mapping  : "updated",
			hidden   : true,
			style    : "text-align: right;"
		}]
	})
},{
	text : "Ext.ux.touch.GridSummary",
	leaf : true,
	card : new Ext.ux.TouchGridPanel({
		store       : Demo.data.TouchGridPanelStore,
		plugins: [new Ext.ux.touch.GridSummary({
			type: "row",
			summaryType: "average"
		})],
		colModel    : [{
			header   : "Company",
			mapping  : "company",
			flex     : 2
		},{
			header   : "Price",
			mapping  : "price",
			style    : "text-align: center;"
		},{
			header   : "Last Updated",
			mapping  : "updated",
			hidden   : true,
			style    : "text-align: right;"
		}]
	})
},{
	text : "Ext.ux.touch.PagingToolbar",
	leaf : true,
	card : new Ext.ux.TouchGridPanel({
		store       : Demo.data.PagingToolbarStore,
		plugins: [new Ext.ux.touch.PagingToolbar()],
		colModel    : [{
			header   : "Company",
			mapping  : "company",
			flex     : 2
		},{
			header   : "Price",
			mapping  : "price",
			style    : "text-align: center;"
		},{
			header   : "Last Updated",
			mapping  : "updated",
			hidden   : true,
			style    : "text-align: right;"
		}]
	})
},{
	text : "Ext.plugin.touch.GridEditor",
	leaf : true,
	card : new Ext.ux.TouchGridPanel({
		store       : Demo.data.TouchGridPanelStore,
		plugins: [{ ptype : "ext.plugin.touch.grideditor", listenEvent : "doubletap" }],
		dockedItems : [{
			xtype : "toolbar",
			dock  : "top",
			title : "Ext.plugin.touch.GridEditor by Mitchell Simoens",
			items : [
				{ text : "Commit Records", ui : "confirm", handler : function() {
					Demo.data.TouchGridPanelStore.each(function(rec) {
						if (rec.dirty) {
							rec.commit();
						}
					});
				}, hidden : true }
			]
		}],
		colModel    : [{
			header   : "Company",
			mapping  : "company",
			flex     : 2
		},{
			header   : "Price",
			mapping  : "price",
			style    : "text-align: center;"
		},{
			header   : "Last Updated",
			mapping  : "updated",
			hidden   : true,
			style    : "text-align: right;"
		}],
		listeners : {
			storeupdate : function(store) {
				var dock = this.getDockedComponent(0),
					btn  = dock.getComponent(0),
					show = (store.getUpdatedRecords().length > 0);

				btn.setVisible(show);
			}
		}
	})
},{
	text : "Ext.ux.TouchGridPanel",
	leaf : true,
	card : new Ext.ux.TouchGridPanel({
		store       : Demo.data.TouchGridPanelStore,
		colModel    : [{
			header   : "Company",
			mapping  : "company",
			flex     : 2
		},{
			header   : "Price",
			mapping  : "price",
			style    : "text-align: center;"
		},{
			header   : "Change",
			mapping  : "change",
			cls      : "centered-cell",
			renderer : function(val) {
				var color = (val > 0) ? "00FF00" : "FF0000";
				return "<span style='color: #" + color + ";'>" + val + "</span>";
			}
		},{
			header   : "Last Updated",
			mapping  : "updated",
			hidden   : true,
			style    : "text-align: right;"
		}]
	})
},{
	text : "Ext.layout.ColumnLayout",
	leaf : true,
	card : new Ext.Panel({
		scroll: "vertical",
		layout: {
			type: "column",
			columnCount: 2
		},
		items: [
			{ xtype: "panel", dockedItems: { xtype: "toolbar", dock: "top", title: "One" },   html: "One"   },
			{ xtype: "panel", dockedItems: { xtype: "toolbar", dock: "top", title: "Two" },   html: "Two"   },
			{ xtype: "panel", dockedItems: { xtype: "toolbar", dock: "top", title: "Three" }, html: "Three" },
			{ xtype: "panel", dockedItems: { xtype: "toolbar", dock: "top", title: "Four" },  html: "Four"  },
			{ xtype: "panel", dockedItems: { xtype: "toolbar", dock: "top", title: "Five" },  html: "Five"  },
			{ xtype: "panel", dockedItems: { xtype: "toolbar", dock: "top", title: "Six" },   html: "Six"   }
		]
	})
},{
	text : "Ext.layout.AccordionLayout",
	leaf : true,
	card : new Ext.Panel({
		layout: {
			type: "accordion",
			activeItem: 0
		},
		items: [
			{ xtype: "panel", title: "One",   html: "One"   },
			new Ext.List({
				scroll: "vertical",
				title: "List Test",
				itemTpl: '<div class="contact2"><strong>{firstName}</strong> {lastName}</div>',
				selModel: {
					mode: 'SINGLE',
					allowDeselect: true
				},
				grouped: true,
				indexBar: true,

				onItemDisclosure: {
					scope: 'test',
					handler: function(record, btn, index) {
						alert('Disclose more info for ' + record.get('firstName'));
					}
				},

				store: Demo.data.AccordionStore
			}),
			{ xtype: "panel", title: "Three", html: "Three" },
			{ xtype: "panel", title: "Four",  html: "Four"  },
			{ xtype: "panel", title: "Five",  html: "Five"  },
			{ xtype: "panel", title: "Six",   html: "Six"   }
		]
	})
}];

Ext.regModel('Demo', {
    fields: [
        {name: 'text',        type: 'string'},
        {name: 'source',      type: 'string'},
        {name: 'preventHide', type: 'boolean'},
        {name: 'cardSwitchAnimation'},
        {name: 'card'}
    ]
});

news.StructureStore = new Ext.data.TreeStore({
    model: 'Demo',
    root: {
        items: news.Structure
    },
    proxy: {
        type: 'ajax',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }
});